<template>
	<view class="parent col">
		<view class="top">
			<view class="row-between-center">
				<u-input class="input" prefixIcon="search" placeholder="搜索供应商">
					<template slot="suffix">
						<view class="search row-center">
							搜索
						</view>
					</template>
				</u-input>
			</view>
			<view class="count">
				<view class="count-name">
					采购数据
				</view>
				<view class="count-line">
				</view>
				<view class="row">
					<view class="count-item col-center">
						<view class="count-text">
							未确认收货订单总数
						</view>
						<view class="count-num">
							10
						</view>
					</view>
					<view class="count-border"></view>
					<view class="count-item col-center">
						<view class="row-w-center">
							<view class="count-text">
								应付款
							</view>
							<view class="count-month row-center">本月</view>
						</view>
						
						<view class="count-num">
							¥200000
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="list col">
			<view class="list-title row-between-center">
				<view class="list-title-text">
					采购商名称
				</view>
				<view class="list-title-text">
					应收款(总)
				</view>
			</view>
			<view class="list-item row-h-center row-between-center" v-for="item in 10" @click="goItem(item)">
				<view class="row-h-center">
					<view class="cart row-center">
						<image src="/static/images/buy_img.png" class="cart-image"></image>
					</view>
					<view class="item-text">
						这是供应商备注名称
					</view>
					<view class="item-red row-center">
						3
					</view>
				</view>
			
				<view class="item-price">
					¥2000
				</view>
			</view>
		</view>
		

		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '基础框架'
			}
		},
		methods: {
			goItem(item){
				uni.navigateTo({
					url:'/src/pages/buy/detail'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.parent {}

	.top {
		width: 100%;
		flex-shrink: 0;
		background: linear-gradient(180deg, #3B60D3 0%, rgba(59, 96, 211, 0.00) 100%);
		padding: 20rpx;
	}

	.input {
		margin-top: 20rpx;
		height: 60rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
		background: #F6F7FB;
	}

	.search {
		color: #FFF;
		font-size: 20rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 36rpx;
		/* 180% */
		width: 88rpx;
		height: 48rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
		background: #3B60D3;
	}

	.count {
		margin-top: 34rpx;
		padding: 30rpx 20rpx;
		height: 133px;
		flex-shrink: 0;
		border-radius: 12rpx;
		background: #3B60D3;

		.count-name {
			color: #FFF;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 44rpx;
			/* 157.143% */
		}

		.count-line {
			margin-top: 30rpx;
			border: 0.5rpx dashed #6d88e0;
		}

		.count-item {
			width: 360rpx;
			margin-top: 20rpx;

			.count-text {
				color: #FFF;
				text-align: center;
				font-size: 24rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 40rpx;
				/* 166.667% */
			}

			.count-num {
				margin-top: 8rpx;
				color: #FFF;
				font-size: 32rpx;
				font-style: normal;
				font-weight: 700;
				line-height: 40rpx;
			}

			.count-month {
				margin-left: 10rpx;
				background-color: #90a6e6;
				color: #FFF;
				font-size: 20rpx;
				border-radius: 4rpx;
				line-height:1.5;
				padding:  0 10rpx;
			}

		}

		.count-border {
			margin-top: 34rpx;
			width: 1rpx;
			height: 66rpx;
			background: #6d88e0;
		}
	}
	.list{
		border-radius: 12rpx;
		background: #FFF;
		margin: 28rpx;
		.list-title{
			padding: 0 20rpx;
			height: 84rpx;
			border-radius: 8rpx;
			background: #F2F3F8;
			.list-title-text{
				color: #A3AAB0;
				font-size: 24rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 40rpx; /* 166.667% */
			}
		}
		
		.list-item{
			height: 104rpx;
			border-bottom: 1rpx dashed  #E4E8FC;;
			.cart{
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				background-color: #F2F3F8;
				.cart-image{
					width: 24rpx;
					height: 24rpx;
				}
			}
	
			.item-text{
				margin-left: 20rpx;
				color:  #20252B;
				font-size: 28rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 44rpx; /* 157.143% */
			}
			.item-red{
				margin-left: 20rpx;
				width: 30rpx;
				height: 30rpx;
				background-color:  #F5222D;
				border-radius: 50%;
				color: #FFF;
				font-size: 22rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 28rpx; /* 127.273% */
			}
			.item-price{
				color: #F5222D;
				font-size: 32rpx;
				font-style: normal;
				font-weight: 700;
				line-height: 44rpx; /* 137.5% */
			}
		}
	}

</style>